<!--
@description：仪表盘 首页
@author: whw
@date: 2021/6/21
-->
<template>
  <div class="main">
    <div class="main-content">
      <div class="main-text">
        <div class="text">
          <p>
            hi，{{ userInfo.nickname }}
          </p>
          <p>
            欢迎进入点餐系统
            <router-link to="meal/history/index">
              <a style="text-indent: 1em" href=""><i class="el-icon-s-order" />立即点餐</a>
            </router-link>
          </p>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Index',
  computed: {
    ...mapState('user', {
      userInfo: 'userInfo'
    })
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: center;
  background: #000 url("../../assets/dashboard.jpg") center;
  background-size: 100%;

  .main-content {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;

    .main-text {
      height: 100%;
      width: 40%;
      position: absolute;
      right: 0;
      color: #ffffff;
      font-size: 40px;
      text-align: left;
      display:flex;
      justify-content:center;
      align-items:center;

      .text{
        width: 100%;
        background: -webkit-linear-gradient(left, #3a5438,#4f634e, #767f77);

        p{
          text-indent: 2em;

          a:hover{
            font-size: 24px;
            transform:scale(1.3);
            transition-duration:.08s
          }
        }

        a{
          font-size: 18px;
          transform:scale(1.3);
          transition-duration:.08s
        }
      }
    }
  }
}
</style>
